<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/static/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>AI诊断助手</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background-color: #f5f7fa;
        color: #333;
      }
      
      .chat-container {
        max-width: 800px;
        margin: 0 auto;
        background-color: #fff;
        min-height: 100vh;
      }
      
      .progress-bar {
        padding: 15px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
      }
      
      .progress-text {
        font-size: 14px;
        margin-bottom: 8px;
        color: #666;
      }
      
      .dots {
        display: flex;
        gap: 6px;
      }
      
      .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #ddd;
      }
      
      .dot.active {
        background-color: #409eff;
      }
      
      .message-area {
        padding: 20px;
      }
      
      .user-message {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
      }
      
      .user-bubble {
        background-color: #409eff;
        color: white;
        padding: 10px 15px;
        border-radius: 10px 10px 0 10px;
        max-width: 70%;
        position: relative;
      }
      
      .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #ddd;
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
      }
      
      .ai-section {
        background-color: #f0f9ff;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 20px;
      }
      
      .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      
      .section-icon {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        background-color: #409eff;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-right: 8px;
      }
      
      .section-title {
        font-weight: bold;
        color: #409eff;
        font-size: 15px;
      }
      
      .ai-content {
        font-size: 14px;
        line-height: 1.6;
        color: #333;
        margin-bottom: 10px;
      }
      
      .emergency-badge {
        display: inline-block;
        background-color: #f7ba2a;
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        margin-top: 8px;
      }
      
      .step-section {
        background-color: #ecf5ff;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 20px;
      }
      
      .step-item {
        background-color: #e6f2ff;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 15px;
      }
      
      .step-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
      }
      
      .step-number {
        background-color: #409eff;
        color: white;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        margin-right: 8px;
      }
      
      .step-title {
        font-weight: bold;
        font-size: 14px;
      }
      
      .test-card {
        background-color: white;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      
      .test-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      
      .test-icon {
        background-color: #409eff;
        color: white;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-right: 10px;
      }
      
      .test-title {
        font-weight: bold;
        font-size: 15px;
        flex: 1;
      }
      
      .priority-badge {
        background-color: #f56c6c;
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
      }
      
      .time-estimate {
        font-size: 12px;
        color: #999;
        margin-left: 8px;
      }
      
      .reason-box {
        background-color: #f5f7fa;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 15px;
        font-size: 13px;
        color: #666;
      }
      
      .params-section {
        margin-bottom: 15px;
      }
      
      .params-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #666;
        padding: 8px 0;
        cursor: pointer;
      }
      
      .execute-btn {
        background-color: #409eff;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px 20px;
        width: 100%;
        font-size: 16px;
        cursor: pointer;
      }
      
      .bottom-tabs {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 100;
      }
      
      .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #909399;
        font-size: 12px;
      }
      
      .tab-item.active {
        color: #409eff;
      }
      
      .tab-icon {
        font-size: 20px;
        margin-bottom: 4px;
      }
      
      .chat-input-area {
        padding: 20px;
        padding-bottom: 80px;
      }
      
      .input-box {
        background-color: #f5f7fa;
        border-radius: 20px;
        padding: 10px 15px;
        display: flex;
        align-items: center;
      }
      
      .message-input {
        flex: 1;
        border: none;
        background: none;
        outline: none;
        font-size: 14px;
      }
      
      .send-btn {
        background-color: #409eff;
        color: white;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        margin-left: 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="chat-container">
        <!-- 进度指示器 -->
        <div class="progress-bar">
          <div class="progress-text">AI智能故障诊断助手</div>
          <div class="dots">
            <div class="dot active"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
          </div>
        </div>
        
        <!-- 聊天消息区域 -->
        <div class="message-area">
          <!-- 用户消息 -->
          <div class="user-message">
            <div class="user-bubble">用户上网卡</div>
            <div class="user-avatar">👤</div>
          </div>
          
          <!-- AI分析部分 -->
          <div class="ai-section">
            <div class="section-header">
              <div class="section-icon">🔍</div>
              <div class="section-title">AI问题分析</div>
            </div>
            <div class="ai-content">
              用户上网卡可能是由于网络连接问题导致的。首先需要检查网络连通性和WiFi信号强度。如果网络连通性正常但仍无法上网，可能是由于网关或其他网络设备配置问题导致的。
            </div>
            <div class="ai-content">
              诊断思路：我们将采取以下步骤来诊断并解决这个问题：
            </div>
            <div class="emergency-badge">紧急程度：中</div>
            <div class="ai-content">计划步骤：4步</div>
          </div>
          
          <!-- 步骤部分 -->
          <div class="step-section">
            <div class="step-item">
              <div class="step-header">
                <div class="step-number">1</div>
                <div class="step-title">第 1/4 步：Ping测试</div>
              </div>
            </div>
            
            <div class="test-card">
              <div class="test-header">
                <div class="test-icon">1️⃣</div>
                <div class="test-title">Ping测试</div>
                <div class="priority-badge">高优先级</div>
                <div class="time-estimate">5-10秒</div>
              </div>
              
              <div class="reason-box">
                <strong>推荐理由：</strong>使用ping命令检查网络连通性和延迟，确定是否存在基本的网络连接问题
              </div>
              
              <div class="params-section">
                <div class="params-toggle">
                  <span>参数配置 (2)</span>
                  <span>▼</span>
                </div>
              </div>
              
              <button class="execute-btn">立即执行</button>
            </div>
          </div>
        </div>
        
        <!-- 输入区域 -->
        <div class="chat-input-area">
          <div class="input-box">
            <input type="text" class="message-input" placeholder="描述你遇到的网络问题" />
            <button class="send-btn">▶</button>
          </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="bottom-tabs">
          <div class="tab-item active">
            <div class="tab-icon">📶</div>
            <div>WiFi扫描</div>
          </div>
          <div class="tab-item">
            <div class="tab-icon">🔍</div>
            <div>Ping测试</div>
          </div>
          <div class="tab-item">
            <div class="tab-icon">🔗</div>
            <div>连通性检查</div>
          </div>
          <div class="tab-item">
            <div class="tab-icon">🌐</div>
            <div>网站可访问</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>